<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">

<title>Pagina sencilla para el ejercicio del bloque T2.5</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>

<body>
<h1> Ejercicio del bloque T2.6 </h1>
<h2> Crear un formulario para la creación e incrementación de un contador, con JQuery y AJAX </h2>

<!--Formulario para la creación de un contador-->
<form action="javascript:crear()">
Ponle nombre al contador:<input type ="text" id="contador" />
<p></p>
Ponle valor al contador: <input type ="text" id="valor" />
<input type="submit" value="Crear contador" />
</form>

<p></p>
<div id='Resultado'></div>
<p></p>

<!--Formulario para incrementar un contador-->
<form action="javascript:incrementar()">
¿Qué contador vas a incrementar?<input type ="text" id="contador2" />
<input type="submit" value="Incrementale!!" />
</form>

<p></p>
<div id='aumentado'></div>
<p></p>

<script type='application/javascript'>

var request = new XMLHttpRequest();

function crear(){
	var contador = $('#contador').val();
	var valor = $('#valor').val();
	var respuesta = $.post('/contador/'+contador+'/'+valor);
	$('#Resultado').html('El contador ' + contador + ' se ha creado correctamente y vale: ' + valor);
}

function incrementar(){
	var contador = $('#contador2').val();
	$.get('/incrementa/'+contador,function(data){
			$('#aumentado').html('El contador: '+contador+' se ha aumentado en 1, ahora vale: '+data.valor);
	});

}

</script>


</form>
</body>

</html>
